<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="getLowPrice"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :setupConfig="setupConfig"
      :searchReset="searchReset"
      :searchConfig="searchConfig"
    >
    <template v-slot:searchBtn="{ searchData }">
          <el-button
            size="medium"
            type="primary"
            @click="handleExport(searchData)"
            >导出</el-button
          >
          <el-button
            size="medium"
            type="primary"
            @click="handleImport(searchData)"
            >导入预订单</el-button
          >
        </template>
    </render-table>
    <DialogView
      :dialogTitle="importDialog.dialogTitle"
      :visible="importDialog.visible"
      @submitData="handleClose"
      @handleClose="handleClose"
      :popupWidth="'650px'"
      v-if="importDialog.visible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="importForm"
        label-width="120px"
      >
        <el-form-item label="订单文件">
          
          <div style="display: flex">
            <span>{{importForm.fileName}}</span>
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeUpload"
            >
              <el-button type="text">上传文件</el-button>
              <el-button
            type="text"
            @click="handleDownload('other')"
            >下载订单模板</el-button
          >
            </el-upload>
            
          </div>
          
        </el-form-item>
        
        <el-form-item label="报表">
          <el-button type="text" @click="openTable">查看生成报表</el-button>
        </el-form-item>
      </el-form>
    </DialogView>
    <DialogView
      :dialogTitle="preTable.dialogTitle"
      :visible="preTable.visible"
      @submitData="preTable.visible = false"
      @handleClose="preTable.visible = false"
      :popupWidth="'400px'"
      v-if="preTable.visible"
    >
  <low-price-table :tableData="lowPriceList"></low-price-table>
  </DialogView>
  </div>
</template>
    
    <script>
import {
  getLowPrice,
  lowestPrice
} from "@/api/purchase/api";
import lowPriceTable from './lowPriceTable.vue';

export default {
  components: { lowPriceTable },
  props:{
      searchReset: { // 搜索条件默认值重置值
            type: Object
        },
  },
  name: "pre-orders",
  data() {
    return {
      importForm:{
        fileName:''
      },
      preTable: {
        visible: false,
        dialogTitle: "报表信息",
      },
      importDialog: {
        visible: false,
        dialogTitle: "导入订单信息",
      },
      searchReset:{
        name:''
      },
      searchConfig: [
        {
          type: "input",
          key: "name",
          placeholder: "物品名称",
        },
      ],
      setupConfig: {
          width:0
      },
      dict: {},
      otherConfig: {
        list: "rows",
      },
      getLowPrice,
      tableColumn: [
        { prop: "produceName", label: "产品名称" },
        { prop: "specification", label: "规格" },
        { prop: "parameter", label: "参数" },
        { prop: "brand", label: "品牌" },
        { prop: "unit", label: "单位" },
        { prop: "number", label: "数量" },
        { prop: "unitPrice", label: "单价" },
        { prop: "money", label: "总价" },
      ],
      lowPriceList:[]
    };
  },
  created() {},
  methods: {
    beforeUpload(file, fileList) {
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "错误",
          message: "上传文件只能为excel文件，且为xlsx,xls格式",
        });
      } else {
        this.importForm.fileName = file.name;
        let formData = new FormData();
        formData.append("file", file.raw);
        lowestPrice(formData).then((res)=>{
          this.lowPriceList = res.data
        })
      }
    },
    openTable(){
      if(this.importForm.fileName){
        this.preTable.visible = true
      }else{
        this.$modal.msgError('请先上传预订单');
      }
    },
    reset() {
      this.importForm = {
        materialType: "",
        name: "",
        fileName: "",
        uploadFile: {},
        timeArr: [],
      };
      this.resetForm("importForm");
    },
    handleClose(){
      this.importDialog.visible = false;
      this.reset()
    },
    handleDownload(type) {
      if(type){
        this.download(
        `/file/download?type=${type}`,
        {},
        type === "other" ? "商品类报价单.xlsx" : "工程报价单.xlsx"
      );
      }else{
        this.$modal.msgError('请先选择订单类型');
      }
      
    },
    handleExport(searchData){
      this.$confirm('是否确认导出当前列表物品的历史价格?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.download(`/file/download/supplierstore?name=${searchData.name}`, {
      }, '历史价格清单.xlsx')
        }).catch(() => {
        });

    },
    handleImport(){
      this.importDialog.visible = true;
      this.importDialog.dialogTitle = "导入预订单信息";
    }
  },
};
</script>
    